<template>
  <div class="product">
    <!-- 搜索框 -->
    <div class="search">
      <template>
        <el-select v-model="searchValue"
                   filterable
                   clearable
                   remote
                   @blur="searchBlur"
                   @change="searchTextChange"
                   reserve-keyword
                   @clear="clear"
                   placeholder="请输入姓名,如果不更新,点击右侧搜索按钮"
                   :remote-method="remoteMethod"
                   :loading="loading">
          <el-option v-for="item in searchList"
                     :key="item.sId"
                     :label="item.name"
                     :value="item.name">
          </el-option>
        </el-select>
      </template>
      <!-- 搜索按钮 -->
      <el-button type="primary"
                 icon="el-icon-search"
                 @click="onSearchButtonClick"
                 plain></el-button>
      <!-- 添加按钮 -->
      <el-button type="primary"
                 @click="addStu"
                 :disabled="disabled">添加项目</el-button>
    </div>
    <!-- 班级选择 -->
    <div class="select-class">
      <!-- 框框 -->
      <el-form>
        <el-form-item label="选择班级:">
          <el-select v-model="classes"
                     filterable
                     @visible-change="classVisible"
                     @change="classChange"
                     placeholder="请选择">
            <el-option label="全部"
                       value="all"></el-option>
            <el-option v-for="(item, index) in classOptions"
                       :key="index"
                       :label="item"
                       :value="item">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </div>
    <!-- 导出excel -->
    <div class="exportExcel">
      <el-button icon="iconfont icon-excel"
                 @click="exportExcel">导出excel数据</el-button>
    </div>
    <!-- 表格 -->
    <div class="stu-table">
      <el-table :data="stuData"
                v-loading="loading"
                border
                style="width: 100%">
        <el-table-column prop="headimgurl"
                         align="center"
                         label="头像"
                         width="80">
          <template slot-scope="scope">
            <el-avatar shape="square"
                       :size="50"
                       fit="fill"
                       :src="scope.row.headimgurl"></el-avatar>
          </template>
        </el-table-column>
        <el-table-column prop="name"
                         align="center"
                         label="姓名"
                         width="180">
        </el-table-column>
        <el-table-column prop="class"
                         align="center"
                         label="班级">
        </el-table-column>
        <el-table-column prop="productUrl"
                         align="center"
                         label="项目">
        </el-table-column>
        <el-table-column align="center"
                         label="操作">
          <template slot-scope="{ row }">
            <el-button type="primary"
                       class="btn"
                       icon="el-icon-view"
                       @click="$router.push({ path: '/StudentManager/studentProfile' })">查看</el-button>
            <el-button type="primary"
                       class="btn"
                       icon="el-icon-edit"
                       @click="editStu(row)">编辑</el-button>
            <el-button type="danger"
                       class="btn"
                       icon="el-icon-delete"
                       @click="deleteStu(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页器 -->
    <div class="pagination">
      <el-pagination background
                     hide-on-single-page
                     layout="prev, pager, next"
                     @current-change="changePage"
                     :page-size="dataCount"
                     :total="total">
      </el-pagination>
    </div>
    <!-- dialog弹出框 -->
    <qf-dialog></qf-dialog>
  </div>
</template>
<script>
  import dialog from "@/components/dialog";
  import { getStuList, delStu, searchStu, getClasses, addStuReq, editStuReq, deleteStu as deleteStuReq } from "@/api";
  import qee from "qf-export-excel";
  // import qee from 'qf-export-excel'
  export default {
    components: {
      "qf-dialog": dialog,
    },
    data() {
      return {
        params: {
          class: "",
          count: 5,
        },
        dataPage: "", // 页码
        dataCount: 5, // 每页展示的数量
        total: 0, // 总共的数据条数
        classOptions: [],
        disabled: false,
        // 表格的数据对象
        stuData: [],
        // 表格加载动画控制
        loading: true,
        classes: "",
        searchList: [],
        searchValue: "",
        blurSearchValue: "",
        list: [],
      };
    },
    created() {
      this.updateStuTable();
    },
    methods: {
      addStuRequest(params) {//将来通过dialog的eventBus进行调用
        addStuReq(params)
          .then(res => {
            // console.log(res.data);
            if (res.data.state) {
              //添加成功 更新列表
              this.updateStuTable()
            }
          })
      },
      editStuRequest(params) {//将来通过dialog的eventBus进行调用
        editStuReq(params)
          .then(res => {
            console.log(res.data);
            if (res.data.state) {
              //更新成功
              //更新列表
              this.updateStuTable()
            }
          })
      },
      // 分页器页码发生改变的时候触发的事件
      changePage(page) {
        // 点击分页切换的时候 需要判断是否搜索了 如果搜索了 那么就应该在搜索结果中 进入第后面页码数据
      },
      // 导出excel
      exportExcel() {
        let titlelist = [
          {
            title: "头像地址",
            key: "headimgurl"
          },
          {
            title: "项目",
            key: "productUrl"
          },
          {
            title: "班级",
            key: "class"
          },
          {
            title: "姓名",
            key: "name"
          }
        ]
        let dataSource = [...this.stuData];//表格数据数组
        qee(titlelist, dataSource, '学员数据')
      },
      // 班级选择框展开/收起触发的事件
      classVisible(isVisible) {
        //展开的时候需要获取数据
        //调用获取列表的方法
        // console.log(isVisible);
        console.log(123);
        if (isVisible) {
          //展开
          getStuList().then((res) => {
            //需要去重操作
            console.log(res.data.data);
            let norepeatArr = [];
            res.data.data.forEach((item) => {
              norepeatArr.push(item.class);
            });
            norepeatArr = Array.from(new Set(norepeatArr));
            this.classOptions = norepeatArr;
          });
        }
      },
      // 选择班级
      classChange(query) {
        // console.log("======", query);
        //如果query是all代表要显示所有的数据,后台的设定是,class字段传空字符串就返回所有班级的数据,所以一下用一个三元表达式来处理
        let classes = query === "all" ? "" : query;
        //复用更新学员数据的方法
        this.updateStuTable({ page: 1, count: 10, classes });
      },
      onSearchButtonClick() {
        // 点击搜索按钮
        console.log(999);
        this.remoteMethod(this.blurSearchValue);
        this.searchTextChange();
      },
      // 搜索框失去焦点 保持输入框的内容
      searchBlur() {
        console.log(111);
        // 将存储好的输入框值 设置给select组件
        this.searchValue = this.blurSearchValue;
      },
      // 编辑学员
      editStu(row) {
        console.log(row);
        let row1 = { ...row }//引用数据类型能影响我们接下来的操作,所以先给他做一个浅拷贝
        this.$bus.$emit('edit-stu', row1)
      },
      // 删除学员
      deleteStu(row) {
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let sId = row.sId;
          deleteStuReq(sId)
            .then(res => {
              if (res.data.state) {
                //删除成功
                this.$message({
                  type: 'success',
                  message: '删除成功!'
                });
                this.updateStuTable()
              } else {
                this.$message.error("删除出错,该数据可能已经被删除")
              }
            })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      // 增加学员
      addStu() {
        // 弹出dialog
        this.$bus.$emit("addstu")
      },
      // 更新表格数据
      updateStuTable(params = { count: 10, page: 1, classes: "" }) {
        //发送请求获取学员数据
        this.loading = true;
        console.log(params);
        getStuList(params).then((res) => {
          // console.log(res);
          //获取数据成功
          this.stuData = res.data.data;
          //关闭loading
          this.loading = false;
        });
      },
      clear() {
        //情况输入框内容的时候,表格应该显示所有的内容
        this.updateStuTable();
      },
      // 搜索框选中值发生变化的事件
      searchTextChange(searchText) {
        //   console.log(searchText);
        console.log(this.searchList);
        this.stuData = this.searchList;
      },
      remoteMethod(query) {
        // 键盘弹起的时候获取输入值
        this.blurSearchValue = query; //赋值三方变量进行输入框内容存储
        let key = query;
        let page = 1;
        let count = "";
        console.log(searchStu);
        searchStu(page, count, key).then((res) => {
          this.searchList = res.data.data;
        });
      },
    },
    mounted() {
      // 页面加载 获取表格数据
      this.$bus.$on("add-stu-ing", params => {
        console.log(params);
        // console.log(this.addStuRequest);
        this.addStuRequest(params)
      })

      this.$bus.$on('edit-stu-ing', params => {
        this.editStuRequest(params)
      })
    },
  };
</script>
<style scoped>
  .search {
    line-height: 60px;
    text-align: left;
    margin: 20px 0;
  }
  .select-class {
    line-height: 40px;
    text-align: left;
    margin-bottom: 20px;
  }
  .stu-table .btn {
    width: 65px;
    height: 25px;
    padding: 0;
  }
  .pagination {
    margin-top: 20px;
  }
  .exportExcel i.icon-excel {
    color: green;
    font-size: 20px;
    margin-right: 3px;
  }

  .exportExcel .el-button {
    padding: 4px 7px;
    float: right;
  }
  .exportExcel {
    margin-bottom: 10px;
    overflow: hidden;
  }
</style>
